<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!--
        使用form标签创建一个表单，form标签中必须指定一个action属性，该属性指向的是一个服务器地址，当我们提交表单时将会提交到action属性对应的地址
    -->

    <form action="012_表单提交.html">

        <!--
            使用input来创建一个文本框，它的type属性是text, 如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性，name表示提交内容的名字。

            用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器，url地址？查询字符串属性名=属性值

            在文本框中也可以指定value属性值，该值会作为文本框的默认值显示
        -->
        用户名：<input type="text" name="userName" />

        <br /><br />

        <!--
            密码框：
                使用input创建一个密码框，它的type属性是password
        -->
        密   码：<input type="password" name="password" />

        <br /><br />

        <!--
            单选按钮：
                使用input来创建一个单选按钮，它的type属性使用radio
                单选按钮通过name属性进行分组，name属性相同的是一组按钮，像这种需要用户选择但是不需要用户直接填写内容的表单项，还必须指定一个value属性，
                这样被选中的表单项的value属性值会最终提交给服务器
        -->
        性别：<input type="radio" name="gender" value="male" checked="checked" />男
             <input type="radio" name="gender" value="female" />女

        <br /><br />

        <!--
            多选框：
                使用一个input创建一个多选框，它的type属性使用checkbox

                如果希望在单选按钮或者多选按钮中指定默认选项中的选项，则可以在希望选中的项目中添加checked=checked属性
        -->
        爱好：<input type="checkbox" name="hobby" value="zq" />足球
             <input type="checkbox" name="hobby" value="lq" checked="checked" />篮球
             <input type="checkbox" name="hobby" value="ymq"/>羽毛球
             <input type="checkbox" name="hobby" value="pbq"/>乒乓球
        <br /><br />

        <!--
            下拉列表：
                使用select来创建一个下拉列表，在下拉列表中使用option标签来创建一个一个列表项

                下拉列表的name属性需要指定给select标签，而value属性需要指定给option标签

                可以通过option中添加selected=selected来将选项设置为默认选中的

                当为select添加一个multiple=multiple，则下拉列表变为一个多选的下拉列表

                在select中可以使用optgroup对选项进行分组，同一个optgroup中的选项是一组，可以通过label属性来指定分组的名字
        -->
        你喜欢的明星是：
        <select name="star">
            <optgroup label="女明星">
                <option value="0">范冰冰</option>
                <option value="1">林心如</option>
                <option value="2" selected="selected">王珞丹</option>
            </optgroup>

            <optgroup label="男明星">
                <option value="3">赵本山</option>
                <option value="4">周杰伦</option>
                <option value="5">陈奕迅</option>
            </optgroup>
        </select>
        <br /><br />

        <!--
            使用textarea来创建一个文本域
        -->
        <textarea name="info"></textarea>

        <!--
            提交按钮可以将表单中的信息提交给服务器，使用input创建一个提交按钮，它的type属性值是sumbit，在提交按钮中可以通过value属性值来指定按钮上的文字
        -->
        <input type="submit" value="我就想提交了"/>

        <!--
            重置按钮：
            type="reset"可以创建一个重置按钮，点击重置按钮以后表单内容将会恢复为默认值
        -->
        <input type="reset" value="我想重置内容了"/>

        <!--
            使用input type=“button”可以创建一个单纯的按钮，这个按钮没有任何功能，只能被点击
        -->
        <input type="button" value="按钮"/>

        <!--
            除了使用input，也可以使用button标签来创建按钮
        -->
        <button type="submit">按钮</button>
        <button type="reset">重置</button>
        <button type="button">按钮</button>
    </form>
</body>
</html>